<template>
  <el-row>
    <el-col :span="12">
      <el-form-item prop="city" :rules="[
      {required:true,message:'请选择地市',trigger:'change'}
    ]">
        <el-select @change="changeOptions()" v-model="forms.city" clearable placeholder="请选择市">
        <el-option v-for="item in cityOption" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      </el-form-item>

    </el-col>
    <el-col :span="12">
      <el-form-item prop="county" :rules="[
      {required:true,message:'请选择县区',trigger:'change'}
    ]">
        <el-select v-model="forms.county" clearable placeholder="请选择县">
        <el-option v-for="item in origenOption" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      </el-form-item>

    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {ref, reactive, defineEmits, defineProps, computed, watch, toRefs} from "vue"
import {getCityName} from "@/api/business/business.js"
const props = defineProps({
  form: {
    type: Object,
    required: true,
    default: () => {},
  },
})
let emit = defineEmits(["update:form"])
let cityOption = ref(null)
let origenOption = ref(null)
// let forms = ref({ ...props.form })
const forms = computed({
	get() {
		return props.form
	},
	set(val) {
		emit('update:form', val)
	}
})
watch(forms, val => {
  if (val.city == "") {
    val.county = ""
    origenOption.value=[]
  } else {
    countys(val.city)
  }
  emit("update:form", val)
},{immediate:true,deep:true})
async function citys() {
  let {data: cityOptionOld} = await getCityName({parent: 370000})
  cityOption.value = cityOptionOld
}
async function countys(e: any) {
  let {data: origenOptionOld} = await getCityName({parent: e})
  origenOption.value = origenOptionOld
}
citys()
if (forms.city !== "") {
  countys(forms.city)
}
function changeOptions() {
  forms.value.county = ""
}
</script>
<style lang="scss" scoped></style>
